<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Enoupps Business Oriented HTML Template</title>
<link href="css/style.css" rel="stylesheet" type="text/css" />
<link href='../../fonts.googleapis.com/css@family=Droid+Sans_3A400,700'utf-8 rel='stylesheet' type='text/css'>
<link rel="stylesheet" href="fonts/font-awesome-4/css/font-awesome.min.css">
<link href="js/bootstrap/dist/css/bootstrap.css" rel="stylesheet">
<link rel="stylesheet" type="text/css" href="js/jquery.niftymodals/css/component.css" />  
<!--For Menu-->
<script src="js/jquery.js" type="text/javascript"></script>
<script src="js/bootstrap/dist/js/bootstrap.min.js"></script>
<script src="js/jquery.niftymodals/js/jquery.modalEffects.js"></script>
<script type="text/javascript" src="js/superfish.js"></script>
<script type='text/javascript' src='js/jquery.custom.js?ver=1.0'></script>
<script type="text/javascript" src="js/jquery.easing.1.3.js"></script>

<!--For Accordian-->
<script type='text/javascript' src='js/jquery-ui-1.8.5.custom.min.js'></script>

<script>
  $(document).ready(function() {
    $("#accordion").accordion();
  });
  </script>
</head>
<body>
<!--Top menu-->
<div class="md-modal md-dark success custom-width md-effect-9" id="form-green">
                    <div class="md-content">
                      <div class="modal-header">
                        <h3>用户登录</h3>
                        <button type="button" class="close md-close" data-dismiss="modal" aria-hidden="true">×</button>
                      </div>
                      <div class="modal-body form">
                        <div class="text-center">
                          <h5>只有登录才能发布贴士哟！如果还没有注册，请猛戳<a href="#">这里</a></h5>
                        </div>

                        <div class="form-group spacer2">
                          <label>用户名</label> <input type="email" class="form-control" placeholder="username@example.com">
                        </div>
                        <div class="form-group">
                          <label>密码</label> <input type="name" class="form-control" placeholder="John Doe">
                        </div>
                        
                      </div>
                      <div class="modal-footer">
                        <button type="button" class="btn btn-success btn-flat md-close" data-dismiss="modal">取消</button>
                        <button type="button" class="btn btn-success btn-flat  md-close md-trigger" data-modal="form-reg">注册</button>
                        <button type="button" class="btn btn-success btn-flat md-close" data-dismiss="modal">登录</button>
                      </div>
                    </div>
                </div>
                <div class="md-modal md-dark success custom-width md-effect-9" id="form-reg">
                    <div class="md-content">
                      <div class="modal-header">
                        <h3>用户注册</h3>
                        <button type="button" class="close md-close" data-dismiss="modal" aria-hidden="true">×</button>
                      </div>
                      <div class="modal-body form">
                        <div class="text-center">
                        </div>

                        <div class="form-group spacer2">
                          <label>用户名</label> <input type="email" class="form-control" placeholder="username@example.com">
                        </div>
                        <div class="form-group">
                          <label>密码</label> <input type="name" class="form-control" placeholder="John Doe">
                        </div>
                        
                      </div>
                      <div class="modal-footer">
                        <button type="button" class="btn btn-success btn-flat md-close" data-dismiss="modal">取消</button>
                        <button type="button" class="btn btn-success btn-flat md-trigger" data-dismiss="modal">注册</button>
                      </div>
                    </div>
                </div>
<div id="top">
  <div class="top-inner">
    <div id="logo"> <a href="#"><img src="images/logo.png" alt="" border="0" /></a> </div>
    <div id="primary-nav">
      <ul id="menu-primary-menu" class="sf-menu">
        <li><a href="index.html"><span>主页</span></a> </li>
        <li><a href="blog.html"><span>贴士</span></a></li>
        <li><a href="about.html"><span>目的地</span></a></li>
        <li><a href="blog.html"><span>景点</span></a></li>
        <li><a href="portfolio.html"><span>发布</span></a></li>
        <li><a class="md-trigger" data-modal="form-green">登录</a></li>
      </ul>
      <!-- END #primary-nav -->
    </div>
  </div>
</div>
<!--Title-->
<div class="title-outer">
  <div class="title"> 目的地 <span>/ 贴士墙</span>
  </div>
</div>
<!--Message-->

<!--Middle section-->
<div id="middle-sdo1">
  <div id="sdo2">
    <div id="middle">
      <!-- Left Section Start-->
            <div class="cl-mcont">  

   <div class="gallery-cont">
    <div class="item">
      <div class="photo">
        <div class="head">
          <span class="pull-right"> <i class="fa fa-heart"></i> </span><h4>Ocean</h4>
          <span class="desc">My Trips</span>
        </div>
        <div class="img">
          <img src="images/sunset2.jpg" alt="gallery-image" />
          <div class="over">
            <div class="func"><a href="#"><i class="fa fa-link"></i></a><a class="image-zoom" href="images/sunset2.jpg"><i class="fa fa-search"></i></a></div>
          </div>            
        </div>
      </div>
    </div>
    <div class="item">
      <div class="photo">
        <div class="head">
          <span class="pull-right active"> <i class="fa fa-heart"></i> </span><h4>Night Street</h4>
          <span class="desc">My Trips</span>
        </div>
        <div class="img">
          <img src="images/gallery/img3.jpg" alt="gallery-image" />
          <div class="over">
            <div class="func"><a href="#"><i class="fa fa-link"></i></a><a class="image-zoom" href="images/gallery/img3.jpg"><i class="fa fa-search"></i></a></div>
          </div>            
        </div>          
      </div>
    </div>
    <div class="item">
      <div class="photo">
        <div class="head">
          <span class="pull-right active"> <i class="fa fa-heart"></i> </span><h4>Mountains</h4>
          <span class="desc">Landscapes</span>
        </div>
        <div class="img">
          <img src="images/gallery/img2.jpg" alt="gallery-image" />
          <div class="over">
            <div class="func"><a href="#"><i class="fa fa-link"></i></a><a class="image-zoom" href="images/gallery/img2.jpg"><i class="fa fa-search"></i></a></div>
          </div>            
        </div>
      </div>
    </div>
    <div class="item">
      <div class="photo">
        <div class="head">
          <span class="pull-right"> <i class="fa fa-heart"></i> </span><h4>Sunset</h4>
          <span class="desc">My Pictures</span>
        </div>
        <div class="img">
          <img src="images/gallery/img2.jpg" alt="gallery-image"/>
          <div class="over">
            <div class="func"><a href="#"><i class="fa fa-link"></i></a><a class="image-zoom" href="images/gallery/img2.jpg"><i class="fa fa-search"></i></a></div>
          </div>            
        </div>
      </div>
    </div>
    <div class="item w2">
      <div class="photo">
        <div class="head">
          <span class="pull-right active"> <i class="fa fa-heart"></i> </span><h4>Road</h4>
          <span class="desc">My Trips</span>
        </div>
        <div class="img">
          <img src="images/gallery/img4.jpg" alt="gallery-image" />
          <div class="over">
            <div class="func"><a href="#"><i class="fa fa-link"></i></a><a class="image-zoom" href="images/gallery/img4.jpg"><i class="fa fa-search"></i></a></div>
          </div>            
        </div>
      </div>
    </div>
    <div class="item">
      <div class="photo">
        <div class="head">
          <span class="pull-right active"> <i class="fa fa-heart"></i> </span><h4>Valley</h4>
          <span class="desc">My Trips</span>
        </div>
        <div class="img">
          <img src="images/gallery/img5.jpg" alt="gallery-image" />
          <div class="over">
            <div class="func"><a href="#"><i class="fa fa-link"></i></a><a class="image-zoom" href="images/gallery/img5.jpg"><i class="fa fa-search"></i></a></div>
          </div>            
        </div>
      </div>
    </div>
    <div class="item">
      <div class="photo">
        <div class="head">
          <span class="pull-right"> <i class="fa fa-heart"></i> </span><h4>Forest</h4>
          <span class="desc">My Trips</span>
        </div>
        <div class="img">
          <img src="images/gallery/img6.jpg" alt="gallery-image" />
          <div class="over">
            <div class="func"><a href="#"><i class="fa fa-link"></i></a><a class="image-zoom" href="images/gallery/img6.jpg"><i class="fa fa-search"></i></a></div>
          </div>            
        </div>
      </div>
    </div>
    
  </div>  </div>
      <div class="clearfix"> </div>
    </div>
  </div>
</div>
<!--Middle section End -->
<!--Purchase Box-->
<!--Footer -->
<div id="footer">
  <div id="footer-inner">
    <div class="client-say">
      <h3>关于“未来旅行家”</h3>
      <img src="images/client.jpg" alt="" class="flleft grayborR" />
      <p>目前旅游业成为一项迅速发展的产业，由此也带来了诸多问题，比如旅游业的一些黑幕和竞争之下带来价格上的比拼和实际质量的缩水。对于景点特色的推荐和黑幕的揭露尤为重要，因此这也是我们网站的特色所在。 </p>
    </div>
    <div class="footer-details">
      <h3>联系我们</h3>
      <div class="address"><img alt="" src="images/address.png"> <strong>地址:</strong> 上海市嘉定区曹安公路4800号同济大学</div>
      <div class="address"><img height="18" width="21" alt="" src="images/phone.png"> <strong>电话:</strong> 18622889061</div>
      <div class="address"><img height="12" width="22" alt="" src="images/mail.png"> <strong>邮箱:</strong> <a href="mailto:23lukia@tongji.edu.cn">23lukia@tongji.edu.cn</a></div>
    </div>
  </div>
  <!--Footer Info-->
  <div class="Finfo">
    <div class="copyright" align="center">  All Rights Reserved &copy;2014 未来旅行家</div>
  </div>
</div>

 <script type="text/javascript">
  var link = $('link[href="css/style.css"]');
  
  if($.cookie("css")) {
    link.attr("href",'css/skin-' + $.cookie("css") + '.css');
  }
  
  $(function(){
    $("#color-switcher .toggle").click(function(){
      var s = $(this).parent();
      if(s.hasClass("open")){
        s.animate({'margin-right':'-109px'},400).toggleClass("open");
      }else{
        s.animate({'margin-right':'0'},400).toggleClass("open");
      }
    });
    
    $("#color-switcher .color").click(function(){
      var color = $(this).data("color");
      $("body").fadeOut(function(){
          //link.attr('href','css/skin-' + color + '.css');
          $.cookie("css", color, {expires: 365, path: '/'});
          window.location.href = "";
          $(this).fadeIn("slow");
        });
    });
  });
</script>
<script type="text/javascript" src="js/masonry.js"></script>
<script type="text/javascript" src="js/jquery.magnific-popup/dist/jquery.magnific-popup.min.js"></script>

<script type="text/javascript">
$(document).ready(function(){
  
      //Initialize Mansory
      var $container = $('.gallery-cont');
      // initialize
      $container.masonry({
        columnWidth: 0,
        itemSelector: '.item'
      });
      
      //Resizes gallery items on sidebar collapse
      $("#sidebar-collapse").click(function(){
        $container.masonry();      
      });
      
      //MagnificPopup for images zoom
      $('.image-zoom').magnificPopup({ 
        type: 'image',
        mainClass: 'mfp-with-zoom', // this class is for CSS animation below
        zoom: {
        enabled: true, // By default it's false, so don't forget to enable it

        duration: 300, // duration of the effect, in milliseconds
        easing: 'ease-in-out', // CSS transition easing function 

        // The "opener" function should return the element from which popup will be zoomed in
        // and to which popup will be scaled down
        // By defailt it looks for an image tag:
        opener: function(openerElement) {
          // openerElement is the element on which popup was initialized, in this case its <a> tag
          // you don't need to add "opener" option if this code matches your needs, it's defailt one.
          var parent = $(openerElement).parents("div.img");
          return parent;
        }
      }

    });

    });
</script>

<script type="text/javascript" src="js/jquery.flot/jquery.flot.js"></script>
<script type="text/javascript" src="js/jquery.flot/jquery.flot.pie.js"></script>
<script type="text/javascript" src="js/jquery.flot/jquery.flot.resize.js"></script>
<script type="text/javascript" src="js/jquery.flot/jquery.flot.labels.js"></script>
</body>
</html>
